<template>
  <div>
    <!-- 集装箱信息 -->
    <el-dialog
      :title="dialogType + '集装箱信息'"
      :visible.sync="dialogVisible"
      :before-close="closedialog"
      width="800"
      append-to-body
      :close-on-click-modal="false"
    >
      <div>
        <el-form
          ref="formData"
          :model="form"
          :rules="rules"
          label-width="148px"
          label-suffix=":"
          size="mini"
          class="flex-form bill-form"
        >
          <el-form-item label="集装箱(器)编号" prop="contaNo">
            <el-input
              v-model.trim="form.contaNo"
              placeholder="请输入集装箱(器)编号"
            />
          </el-form-item>
          <el-form-item label="重箱或者空箱标识" prop="emptyConta">
            <el-select v-model.trim="form.emptyConta" filterable placeholder="请输入重箱或者空箱标识">
              <el-option v-for="(item, index) in dict.type.bills_conta_empty_mark" :key="index"
                         :label="item.value+'-'+item.label"
                         :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="集装箱(器)自重(㎏)" prop="contaWt">
            <el-input-number
              v-model="form.contaWt"
              size="mini"
              :min="0"
              placeholder="请输入集装箱(器)自重(㎏)"
              controls-position="right"
            ></el-input-number>
          </el-form-item>
          <el-form-item label-width="20px">
            <el-button
              type="success"
              plain
              @click="addForm"
              size="mini"
            >添加集装箱(器)编号
            </el-button
            >
          </el-form-item>
        </el-form>

        <basic-table
          ref="tableList"
          :columns="columns"
          :tableData="tableData"
          :needPagination="false"
        >
          <template #emptyConta="scope">
            <dict-tag :options="dict.type.bills_conta_empty_mark" :value="scope.row.emptyConta"/>
          </template>

          <template #operate="scope">
            <div class="option-menu">
              <el-button
                type="text"
                size="mini"
                class="table-edit"
                @click="handleDelete(scope.index, tableData)"
                v-hasPermi="['system:costStopConfig:delete']"
              >
                移除
              </el-button>
            </div>
          </template>
        </basic-table>
      </div>
      <span slot="footer" class="dialog-footer">
      <el-button
        type="primary"
        @click="submitForm('formData')"
        size="small"
        v-if="dialogType != 'detail'"
      >确定</el-button
      >
      <el-button @click="closedialog('formData')" size="small">取消</el-button>
    </span>
    </el-dialog>
  </div>

</template>

<script>

export default {
  name: "containerInfo",
  dicts: ['bills_conta_empty_mark'],
  props: {
    vehicleContaList: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      tableData: [],
      columns: [
        {
          prop: "contaNo",
          label: "集装箱(器)编号",
          align: "center",
        },
        {
          prop: "emptyConta",
          label: "重箱或者空箱标识",
          align: "center",
          slot: true
        },
        {
          prop: "contaWt",
          label: "集装箱(器)自重(㎏)",
          align: "center",
        },
        {
          prop: "operate",
          label: "操作",
          slot: true,
          width: 150,
          fixed: "right",
        },
      ],
      dialogVisible: false,
      dialogType: "新增",
      editIndex: null,
      form: {
        id: null,
        contaNo: null,
        contaType: null,
        contaWt: null,
        emptyConta: null,
        sealsNo: null,
        esealNo: null,
      },
      rules: {
        contaNo: [
          {
            required: true,
            message: "集装箱(器)编号不能为空",
            trigger: "blur",
          },
        ],
        emptyConta: [
          {
            required: true,
            message: "重箱或者空箱标识不能为空",
            trigger: "blur",
          },
        ],
        contaWt: [
          {
            required: true,
            message: "集装箱(器)重箱重量不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    initForm() {
      this.form = {
        id: null,
        contaNo: null,
        contaWt: null,
        emptyConta: null,
        sealsNo: null,
        esealNo: null,
      };
    },
    handleAdd() {
      this.initForm();
      this.dialogType = "新增";
      this.tableData.push(this.form);
    },
    open() {
      this.initForm();
      this.dialogVisible = true;
      if (this.vehicleContaList.length > 0) {
        this.tableData = this.vehicleContaList;
      }
    },
    closedialog() {
      this.$refs["formData"].resetFields();
      this.tableData = [];
      this.dialogVisible = false;
    },
    handleDelete(index, rows) {
      rows.splice(index, 1);
    },
    addForm() {
      this.$refs["formData"].validate((valid) => {
        if (valid) {
          let list = this.tableData.map(item => item.contaNo);
          if (list.indexOf(this.form.contaNo) != -1) {
            this.$message.warning("该集装箱(器)编号已存在!")
            return;
          }
          this.tableData.push(this.form);
          this.dialogType == "新增";
          this.initForm();
        }
      });
    },
    submitForm() {
      if (this.tableData.length == 0) {
        this.$message.warning("集装箱(器)为空!")
        return;
      }
      this.$emit("submitContainerInfo", [...this.tableData]);
      this.closedialog();
      this.tableData=[];
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .el-empty {
  padding: 0;
}

::v-deep .el-empty__image {
  width: 80px !important;
}

::v-deep .el-empty__description {
  margin-top: 0;

  p {
    font-size: 12px;
  }
}

::v-deep .el-table {
  th {
    background-color: #ECF5FF;
    color: #333;
  }
}
</style>
